<template>
   <div id="app" class="showsy_record">
        <div v-for="(items,index) in jiazuJLList.data" :key="index" class="one_jilu m0auto">
            <div class="flex-dire-row itemMonth">
                <p style="margin-left: 0.296296rem;display: inline-block;">
                    <span>{{items.month}}</span>
                </p>
                <p style="margin-right: 0.296296rem;display: inline-block;">
                    <span>收益：￥{{items.total}}</span>
                </p>
            </div>
           
            <router-link v-for="(daysitem,dayidx) in items.days" :key="dayidx" :to="{path:'/syRecord/:month/:day',query:{month:index,day:dayidx}}" class="flex-dire-row itemDayStyle">
                <p class="fontSize_rz">
                    <span style="width:2.083333rem;display: inline-block;">{{daysitem.time}}</span>
                </p>
                <p class="fontSize_zuan flex-dire-row" style="text-align: right;align-items: center;">
                    <span style="display: inline-block;margin-right: 0.185185rem;">￥{{daysitem.total}}</span>
                    <img src="static/image/right.png">
                </p>
            </router-link>

        </div>

   </div>
</template>

<script>
import getRequests from '../assets/js/common';
export default {
  data () {
    return {
      name:'syRecord',
      jiazuJLList:{}
    }
  },
  mounted () {
    var that = this;
			that.https.post(getRequests.getRequests.getEarningsRecord,{
      }).then(res => {
          console.log(res);
          this.jiazuJLList = res;
	})
  },
  watch:{
    
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   body {
            background-color: #f5f5f5;
        }
        
        #app {
            width: 10rem;
            margin: 0 auto;
        }
        
        .one_jilu {
            width: 9.351852rem;
            /*border-bottom: 0.009259rem solid #f5f5f5;*/
        }
        
        .itemMonth {
            justify-content: space-between;
            font-size: 0.333333rem;
            color: #666;
            height: 0.759259rem;
            align-items: center;
            width: 100%;
            position: relative;
        }
        
        .itemMonth::after {
            content: "";
            width: 100%;
            height: 0.018519rem;
            background-color: #ccc;
            position: absolute;
            left: 0;
            top: 0.759259rem;
        }
        
        .itemMonth:last-child::after {
            content: none;
        }
        
        .itemDayStyle {
            width: 100%;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            border-radius: 0.138889rem;
            height: 1.203704rem;
            margin: 0.185185rem auto;
        }
        
        .fontSize_rz {
            font-size: 0.333333rem;
            color: #a8a8a8;
            margin-left: 0.296296rem;
        }
        
        .fontSize_zuan {
            font-size: 0.444444rem;
            font-weight: bold;
            color: #6b67f1;
            margin-right: 0.296296rem;
        }
        
        .fontSize_zuan img {
            width: 0.324074rem;
            height: 0.324074rem;
        }
</style>
